<template>
  <ul class="nav-box">
    <li v-for="i in navlist" :key="i.id">
      <img
        :src="i.img"
      />
      <span>{{i.name}}</span>
    </li>
  </ul>
</template>
  
<script>
import { getnav } from '@/api/home';
export default {
  name: "NavBarVue",
  data() {
    return {
      navlist: [],
    };
  },
  created() {
    getnav().then((res)=>{
      this.navlist=res.data;
      console.log(res.data);
    })
  },
};
</script>
  
  <style scoped>
.nav-box {
  width: 100%;
  height: 10rem;
  display: flex;
  background-color: white;
  flex-wrap: wrap;
  font-size: 0.75rem;
  margin-top: 0.3125rem;
  border-radius: 0.9375rem;
  overflow: auto;
}
.nav-box li {
  width: 20%;
  height: 5rem;
  box-sizing: border-box;
  /* border: 1px solid black; */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav-box li img {
  padding-top: 0.625rem;
  width: 2.5rem;
  height: 2.5rem;
}
</style>